<title>首页示例 01</title>

<link rel="stylesheet" href="/vendor/chartist-js/chartist.css">
<link rel="stylesheet" href="/vendor/chartist-plugin-tooltip/chartist-plugin-tooltip.css">
<link rel="stylesheet" href="/css/examples/pages/home/v1.css">

<div class="page animation-fade page-index-v1">
    <div class="page-content padding-30 container-fluid">
        <div class="row" data-plugin="matchHeight" data-by-row="true">
            <div class="col-xlg-7 col-md-7">

                <div class="widget widget-shadow widget-responsive" id="widgetLineareaColor">
                    <div class="widget-content">
                        <div class="padding-top-30 padding-30" style="height:calc(100% - 250px);">
                            <div class="row">
                                <div class="col-xs-7">
                                    <p class="font-size-20 blue-grey-700">能量预测</p>
                                    <p>基础数据来源于胡编乱造网</p>
                                    <div class="counter counter-md text-left">
                                        <div class="counter-number-group">
                                            <span class="counter-icon red-600"><i class="icon wb-triangle-up" aria-hidden="true"></i></span>
                                            <span class="counter-number red-600">2,250</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-5">
                                    <div class="pull-right clearfix">
                                        <ul class="list-unstyled">
                                            <li class="margin-bottom-5 text-truncate">
                                                <i class="icon wb-medium-point red-600 margin-right-5" aria-hidden="true"></i>
                                                膳食摄入量
                                            </li>
                                            <li class="margin-bottom-5 text-truncate">
                                                <i class="icon wb-medium-point orange-600 margin-right-5" aria-hidden="true"></i>
                                                运动
                                            </li>
                                            <li class="margin-bottom-5 text-truncate">
                                                <i class="icon wb-medium-point green-600 margin-right-5" aria-hidden="true"></i>
                                                其他
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ct-chart height-250"></div>
                    </div>
                </div>

            </div>
            <div class="col-xlg-5 col-md-5">

                <div class="widget widget-shadow" id="widgetStackedBar">
                    <div class="widget-content">
                        <div class="padding-30 height-150">
                            <p>市场份额</p>
                            <div class="red-600">
                                <i class="wb-triangle-up font-size-20 margin-right-5"></i> <span class="font-size-30">26,580.62</span>
                            </div>
                        </div>
                        <div class="counters padding-bottom-20 padding-horizontal-30" style="height:calc(100% - 350px);">
                            <div class="row no-space">
                                <div class="col-xs-4">
                                    <div class="counter counter-sm">
                                        <div class="counter-label text-uppercase">阿里巴巴</div>
                                        <div class="counter-number-group text-truncate">
                                            <span class="counter-number-related green-600">+</span>
                                            <span class="counter-number green-600">82.24</span>
                                            <span class="counter-number-related green-600">%</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-4">
                                    <div class="counter counter-sm">
                                        <div class="counter-label text-uppercase">腾讯</div>
                                        <div class="counter-number-group text-truncate">
                                            <span class="counter-number-related red-600">-</span>
                                            <span class="counter-number red-600">12.06</span>
                                            <span class="counter-number-related red-600">%</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-4">
                                    <div class="counter counter-sm">
                                        <div class="counter-label text-uppercase">百度</div>
                                        <div class="counter-number-group text-truncate">
                                            <span class="counter-number-related green-600">+</span>
                                            <span class="counter-number green-600">24.86</span>
                                            <span class="counter-number-related green-600">%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ct-chart height-200"></div>
                    </div>
                </div>

            </div>
            <div class="col-xlg-4 col-md-12">
                <div class="row height-full">
                    <div class="col-xlg-12 col-md-6" style="height:50%;">

                        <div class="widget widget-shadow bg-blue-600 white" id="widgetLinepoint">
                            <div class="widget-content">
                                <div class="padding-top-25 padding-horizontal-30">
                                    <div class="row no-space">
                                        <div class="col-xs-6">
                                            <p>今日收入</p>
                                            <p class="blue-200">最新单笔收入 &yen;223.45</p>
                                        </div>
                                        <div class="col-xs-6 text-right">
                                            <p class="font-size-30 text-nowrap">&yen;4500</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="ct-chart height-120"></div>
                            </div>
                        </div>

                    </div>
                    <div class="col-xlg-12 col-md-6" style="height:50%;">

                        <div class="widget widget-shadow bg-purple-600 white" id="widgetSaleBar">
                            <div class="widget-content">
                                <div class="padding-top-25 padding-horizontal-30">
                                    <div class="row no-space">
                                        <div class="col-xs-6">
                                            <p>月收入</p>
                                            <p class="purple-200">同比增长 2%</p>
                                        </div>
                                        <div class="col-xs-6 text-right">
                                            <p class="font-size-30 text-nowrap">&yen;124,500</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="ct-chart height-120"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-xlg-8 col-md-12">

                <div class="widget widget-shadow widget-responsive" id="widgetOverallViews">
                    <div class="widget-content padding-30">
                        <div class="row padding-bottom-30" style="height:calc(100% - 250px);">
                            <div class="col-xs-12 col-sm-4">
                                <div class="counter counter-md text-left">
                                    <div class="counter-label">总利润</div>
                                    <div class="counter-number-group text-truncate">
                                        <span class="counter-number-related red-600">&yen;</span>
                                        <span class="counter-number red-600">432,852</span>
                                    </div>
                                    <div class="counter-label">同比增长 2%</div>
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-4">
                                <div class="counter counter-sm text-left inline-block">
                                    <div class="counter-label">线下销售</div>
                                    <div class="counter-number-group">
                                        <span class="counter-number-related">&yen;</span> <span class="counter-number">12,346</span>
                                    </div>
                                </div>
                                <div class="ct-chart inline-block small-bar-one"></div>
                            </div>
                            <div class="col-xs-6 col-sm-4">
                                <div class="counter counter-sm text-left inline-block">
                                    <div class="counter-label">线上销售</div>
                                    <div class="counter-number-group">
                                        <span class="counter-number-related">&yen;</span> <span class="counter-number">17,555</span>
                                    </div>
                                </div>
                                <div class="ct-chart inline-block small-bar-two"></div>
                            </div>
                        </div>
                        <div class="ct-chart line-chart height-250"></div>
                    </div>
                </div>

            </div>
            <div class="col-xlg-6 col-md-12">

                <div class="widget widget-shadow widget-responsive" id="widgetTimeline">
                    <div class="widget-content">
                        <div class="padding-30" style="height:120px;">
                            <div class="row">
                                <div class="col-xs-4">
                                    <div class="counter text-left">
                                        <div class="counter-label blue-grey-700">总流量</div>
                                        <div class="counter-number-group">
                                            <span class="counter-number red-600">21,451</span>
                                            <span class="counter-number-related red-600">MB</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-4">
                                    <div class="counter text-left">
                                        <div class="counter-label">当前</div>
                                        <div class="counter-number-group">
                                            <span class="counter-number">227.34</span>
                                            <span class="counter-number-related">KB</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-4">
                                    <div class="counter text-left">
                                        <div class="counter-label">平均</div>
                                        <div class="counter-number-group">
                                            <span class="counter-number">117.65</span>
                                            <span class="counter-number-related">MB</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <ul class="list-unstyled padding-bottom-50" style="height:calc(100% - 270px);">
                            <li class="padding-horizontal-30 padding-vertical-15 container-fluid">
                                <div class="row">
                                    <div class="col-xs-3">QQ</div>
                                    <div class="col-xs-6">210,685,943 用户正在使用</div>
                                    <div class="col-xs-3 green-600">227.34KB</div>
                                </div>
                            </li>
                            <li class="padding-horizontal-30 padding-vertical-15 container-fluid">
                                <div class="row">
                                    <div class="col-xs-3">微信</div>
                                    <div class="col-xs-6">560,685,943 用户正在使用</div>
                                    <div class="col-xs-3 green-600">1218.62KB</div>
                                </div>
                            </li>
                        </ul>
                        <div class="ct-chart height-150"></div>
                    </div>
                </div>

            </div>
            <div class="col-xlg-6 col-md-12">

                <div class="widget widget-shadow" id="widgetWeather">
                    <div class="widget-content">
                        <div class="row no-space height-full">
                            <div class="col-sm-7 height-full">
                                <div class="padding-35 text-center">
                                    <h4>北京</h4>
                                    <p class="blue-grey-400 margin-bottom-35">2016年9月9日 星期一</p>
                                    <canvas id="widgetSunny" height="60" width="60"></canvas>
                                    <div class="font-size-40 red-600">
                                        26° <span class="font-size-30">C</span>
                                    </div>
                                    <div>晴</div>
                                </div>
                                <div class="weather-times padding-30">
                                    <div class="row no-space text-center">
                                        <div class="col-xs-3">
                                            <div class="weather-day vertical-align">
                                                <div class="vertical-align-middle">
                                                    <div class="margin-bottom-5">12:00</div>
                                                    <i class="wi-day-cloudy font-size-24 margin-bottom-5"></i>
                                                    <div class="red-600">24° <span class="font-size-12">C</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xs-3">
                                            <div class="weather-day vertical-align">
                                                <div class="vertical-align-middle">
                                                    <div class="margin-bottom-5">12:30</div>
                                                    <i class="wi-day-sunny font-size-24 margin-bottom-5"></i>
                                                    <div class="red-600">26° <span class="font-size-12">C</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xs-3">
                                            <div class="weather-day vertical-align">
                                                <div class="vertical-align-middle">
                                                    <div class="margin-bottom-5">13:00</div>
                                                    <i class="wi-day-sunny font-size-24 margin-bottom-5"></i>
                                                    <div class="red-600">28° <span class="font-size-12">C</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xs-3">
                                            <div class="weather-day vertical-align">
                                                <div class="vertical-align-middle">
                                                    <div class="margin-bottom-5">13:30</div>
                                                    <i class="wi-day-sunny font-size-24 margin-bottom-5"></i>
                                                    <div class="red-600">30° <span class="font-size-12">C</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-5 bg-blue-grey-100 height-full">
                                <div class="weather-list">
                                    <ul class="list-unstyled margin-0">
                                        <li class="container-fluid">
                                            <div class="row no-space">
                                                <div class="col-xs-4">
                                                    周二
                                                </div>
                                                <div class="col-xs-4">
                                                    <i class="wi-day-cloudy font-size-24"></i>
                                                </div>
                                                <div class="col-xs-4">
                                                    24 - 26
                                                </div>
                                            </div>
                                        </li>
                                        <li class="container-fluid">
                                            <div class="row no-space">
                                                <div class="col-xs-4">
                                                    周三
                                                </div>
                                                <div class="col-xs-4">
                                                    <i class="wi-day-cloudy font-size-24"></i>
                                                </div>
                                                <div class="col-xs-4">
                                                    24 - 26
                                                </div>
                                            </div>
                                        </li>
                                        <li class="container-fluid">
                                            <div class="row no-space">
                                                <div class="col-xs-4">
                                                    周四
                                                </div>
                                                <div class="col-xs-4">
                                                    <i class="wi-day-cloudy font-size-24"></i>
                                                </div>
                                                <div class="col-xs-4">
                                                    24 - 26
                                                </div>
                                            </div>
                                        </li>
                                        <li class="container-fluid">
                                            <div class="row no-space">
                                                <div class="col-xs-4">
                                                    周五
                                                </div>
                                                <div class="col-xs-4">
                                                    <i class="wi-day-cloudy font-size-24"></i>
                                                </div>
                                                <div class="col-xs-4">
                                                    24 - 26
                                                </div>
                                            </div>
                                        </li>
                                        <li class="container-fluid">
                                            <div class="row no-space">
                                                <div class="col-xs-4">
                                                    周六
                                                </div>
                                                <div class="col-xs-4">
                                                    <i class="wi-day-cloudy font-size-24"></i>
                                                </div>
                                                <div class="col-xs-4">
                                                    24 - 26
                                                </div>
                                            </div>
                                        </li>
                                        <li class="container-fluid">
                                            <div class="row no-space">
                                                <div class="col-xs-4">
                                                    周日
                                                </div>
                                                <div class="col-xs-4">
                                                    <i class="wi-day-cloudy font-size-24"></i>
                                                </div>
                                                <div class="col-xs-4">
                                                    24 - 26
                                                </div>
                                            </div>
                                        </li>
                                        <li class="container-fluid">
                                            <div class="row no-space">
                                                <div class="col-xs-4">
                                                    周一
                                                </div>
                                                <div class="col-xs-4">
                                                    <i class="wi-day-cloudy font-size-24"></i>
                                                </div>
                                                <div class="col-xs-4">
                                                    24 - 26
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-xlg-3 col-md-6">

                <div class="widget widget-shadow" id="widgetTable">
                    <div class="widget-body padding-30">
                        <h3 class="widget-title">
                            <span class="text-truncate">收藏夹</span> <span class="pull-right red-600 font-size-24">&yen; 102,967</span>
                        </h3>
                        <form class="margin-top-25" action="#" role="search">
                            <div class="input-search input-search-dark">
                                <i class="input-search-icon wb-search" aria-hidden="true"></i>
                                <input type="text" class="form-control" placeholder="搜索..">
                            </div>
                        </form>
                    </div>
                    <table class="table margin-bottom-0">
                        <tbody>
                        <tr>
                            <td>MacBook</td>
                            <td>&yen; 9,500</td>
                            <td class="green-600">+ 458</td>
                        </tr>
                        <tr>
                            <td>ThinkServer TD350</td>
                            <td>&yen; 33,425</td>
                            <td class="red-600">- 1,632</td>
                        </tr>
                        <tr>
                            <td>天逸5050</td>
                            <td>&yen; 3,199</td>
                            <td class="green-600">+ 26</td>
                        </tr>
                        <tr>
                            <td>荣耀畅玩5</td>
                            <td>&yen; 550</td>
                            <td class="green-600">+ 0</td>
                        </tr>
                        <tr>
                            <td>HTC VIVE虚拟现实头盔</td>
                            <td>&yen; 18,500</td>
                            <td class="red-600">- 586</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
            <div class="col-xlg-3 col-md-6">

                <div class="widget widget-shadow" id="widgetLinepointDate">
                    <div class="widget-body padding-30">
                        <h3 class="widget-title">销售统计 <span Class="label label-dark label-round pull-right">查看</span>
                        </h3>
                        <div class="row text-center margin-vertical-25">
                            <div class="col-xs-4">
                                <div class="counter">
                                    <div class="counter-label">总计</div>
                                    <div class="counter-number red-600">20,186</div>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="counter">
                                    <div class="counter-label">今日</div>
                                    <div class="counter-number red-600">36</div>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="counter">
                                    <div class="counter-label">本周</div>
                                    <div class="counter-number red-600">261</div>
                                </div>
                            </div>
                        </div>
                        <p>数据每 30 分钟更新一次</p>
                    </div>
                    <div class="ct-chart height-150"></div>
                </div>

            </div>
        </div>
    </div>
</div>

<script src="/vendor/skycons/skycons.min.js"></script>
<script src="/vendor/matchheight/jquery.matchHeight.min.js"></script>
<script src="/vendor/chartist-js/chartist.js" data-name="chartist"></script>
<script src="/vendor/chartist-plugin-tooltip/chartist-plugin-tooltip.js" data-deps="chartist"></script>
<script src="/js/examples/pages/home/home-v1.js"></script>
